<template style="height: 100%;">

	<body style="height: 100%;">
		<div class="loan_nav col_nav">
			<ul>
				<li>
					<a href="javascript:history.go(-1)">
						<i class="iconfont">&#xe61e;</i>
					</a>
				</li>
				<li>
					<p>详细查询</p>
				</li>
				<li></li>
			</ul>
		</div>
		
			<div class="interval_T">

			</div>
			<div class="loan_detail">
				<ul>
					<li>
						<p>贷款人：
							<span>{{applyInfo.userName}}</span>
						</p>
						<!-- <p>贷款类型：
							<span>{{applyInfo.loansType}}</span>
						</p> -->
					</li>
					<li>
						<p>贷款时间：
							<span>{{stringToDate(applyInfo.createDate)}}</span>
						</p>
						<!-- <p>贷款金额：
							<span>{{applyInfo.loansInterval}}</span>
						</p> -->
					</li>
				</ul>
			</div>
			<!-- <div class="Ringing_reminding">
				<ul>
					<li>
						<i class="iconfont">&#xe61d;</i>
					</li>
					<li>
						<p>响铃提醒</p>
					</li>
				</ul>
			</div> -->
			<div class="Parting_line2 Parting_l">

			</div>
			<!-- <ul >
				<li>
					<flow orientation="vertical">
						<template v-for="(d, index) in applyInfo.applyDetailList">
							<FlowState :is-done="applyInfo.status>0" :state="index === 0 ? '起' : index+1 === applyInfo.applyDetailList.length ? '终' : index">
								<ul slot="title">
									<li>
										<router-link :to="detailUrl(applyInfo.status)">
											<p>{{d.memo}}</p>
											<p>{{d.disposeDate}}</p>
										</router-link>
									</li>
								</ul>
							</FlowState>
							<flow-line line-span="15px" v-if="index+1 !== applyInfo.applyDetailList.length" :is-done="applyInfo.status>0"></flow-line>
						</template>
						
					</flow>
				</li>
				

			</ul> -->
			<div class="step_D">
				<ul to="#" v-for="(d, index) in applyInfo.applyDetailList">
					<li>
						<div>
							<div :class="Number(applyInfo.status)>=Number(d.status)?'B-col':''">
								<p>{{index+1}}</p>
							</div>
							
							<section class="line_D" :class="Number(applyInfo.status)>=Number(d.status)?'B-col':''" v-show="!(index+1 === applyInfo.applyDetailList.length)">

							</section>
						</div>
					</li>
					<router-link tag="li" :to="detailUrl(applyInfo.status, d.status) || ''"><p :class="detailUrl(applyInfo.status, d.status) ? 'checked_B' : ''">{{d.memo}}</p></router-link>
					<li><p>{{d.disposeDate}}</p></li>
				</ul>
			</div>
			<div style="height: 1rem;">

			</div>
		

		<div class="inquiry_foot">
			<ul>
				<li @click="$vux.toast.text('已催促')">
					<i class="iconfont">&#xe678;</i>
					<p>催促</p>
				</li>
				<!-- <li>
					<router-link to="/supplementmaterials">
						<i class="iconfont">&#xe632;</i>
						<p>增补材料</p>
					</router-link>
				</li> -->
				<li @click="query">
					<i class="iconfont">&#xe787;</i>
					<p>刷新</p>
				</li>
				<!-- <li>
					<router-link to="customerservice">
						<i class="iconfont">&#xe63d;</i>
						<p>联系客服</p>
					</router-link>
				</li> -->
				<li @click="cancel">
					<i class="iconfont">&#xe8e8;</i>
					<p>取消申请</p>
				</li>
			</ul>
		</div>
	</body>
</template>
<script>
import { Flow, FlowState, FlowLine, Toast, Confirm, Loading, Timeline, TimelineItem} from 'vux'
export default {
	components: {
		Flow,
		FlowState,
		FlowLine,
		Toast,
		Confirm,
		Loading,
		Timeline,
		TimelineItem,
		
	},
	data() {
		return {
			applyInfo: {},
		}
	},
	created() {
		this.query()
	},
	methods: {
		query() {
			const id = this.$route.params.id
			this.$vux.loading.show()
			this.$http.get(`/app/loan/info/${id}`).then(json => {
				const { code, loan } = json
				if (code === 0) {
					this.applyInfo = loan
				}
				this.$vux.loading.hide()
			})
		},
		cancel() {
			const vm = this
			const id = vm.$route.params.id
			vm.$vux.confirm.show({
				title: '提示',
				content: '是否取消贷款',
				onConfirm() {
					vm.$http.post(`/app/loan/cancel/${id}`).then(json => {
						const { code } = json
						if (code === 0) {
							vm.$vux.toast.show({ text: '取消成功' })
						}
					})
				}
			})
		},
		detailUrl(status, dStatus) {
			const id = this.$route.params.id
			if (status == '4' && dStatus == '6') {
				return `/Pdeposit/${id}`
			} else if(status == '10' && dStatus == '11') {
				return `/Pcost/${id}`
			} else {
				return null
			}
			// 	return `/Mloan/${id}`
			// } else if (status == '5') {
			// 	return `/Pdeposit/${id}`
			// } else if (status == '6') {
			// 	return `/Smaterial/${id}`
			// } else if (status == '10') {
			// 	return `/Pcost/${id}`
			// } else if (status == '11') {
			// 	return `/releaseevaluation/${id}`
			// } else {
			// 	return ''
			// }
		},
		
		stringToDate(str) {
			if (!str) return ''
			let fullDate = str.split(' ')
			return fullDate[0]
		}
	}
}
</script>

<style>
.weui-wepay-flow__li .weui-wepay-flow__state {
  width: 0.35rem !important;
  height: 0.35rem !important;
  border-radius: 100% !important;
  line-height: 0.35rem !important;
  font-size: 0.24rem !important;
}
.weui-wepay-flow__li {
  width: 0.35rem !important;
  height: 0.35rem !important;
}
.flex_box .weui-toast.weui-toast_text {
  width: 1.5rem !important;
}
.flex_box .weui-toast {
  top: 50%;
}
.flex_box .weui-dialog__bd p {
  font-size: 0.26rem;
}
.flex_box .weui-dialog__hd {
  padding: 0.2rem !important;
}
.flex_box .weui-dialog__title {
  font-size: 0.4rem !important;
  display: block;
}
.flex_box .weui-dialog__bd {
  padding: 0px !important;
}
.flex_box .weui-dialog__ft {
  font-size: 0.4rem;
}
.flex_box .weui-toast {
  width: 1.5rem !important;
  min-height: 0.7rem !important;
}
.flex_box .weui-icon_toast.weui-loading {
  width: 0.8rem !important;
  height: 0.8rem !important;
  margin: 0.2rem;
}
.flex_box .weui-toast__content {
  font-size: 0.3rem;
}
.flex_box .weui-loading_toast .weui-toast__content {
  margin: -0.7rem;
}
/* .weui-wepay-flow__bd{
	align-items: left !important;
} */
/* .weui-wepay-flow_vertical .weui-wepay-flow__line {
  height: 5% !important;
} */
.vux-timeline{
	padding: 0.3rem !important;
}
</style>